<template>
<div>
  <Card v-bind:class="{ newGridCardClassOne: classType1 ,newGridCardClassTwo: classType2}">
    <template>
      <Tabs :value="tabValue" style="color: white" @on-click="changeTab">
        <TabPane label="搜索" icon="md-search">
          <select-info v-if="selectShow" @callBack="callBack"></select-info>
        </TabPane>
        <TabPane label="树形图" icon="md-git-network">
          <tree-info v-if="treeShow" @callBackTree="callBackTree"></tree-info>
        </TabPane>
      </Tabs>
    </template>
  </Card>
  <Card class="typeCheckBoxClass">
    <div>
      <CheckboxGroup v-model="typeCheckBox">
        <Checkbox label="residential" class="residentialBoxClass">
          <Icon type="ios-menu" />
          <span>小区</span>
        </Checkbox>
        <!--      .ivu-checkbox-checked .ivu-checkbox-inner-->
        <Checkbox label="garden" class="gardenBoxClass">
          <Icon type="ios-grid-outline" />
          <span>网格</span>
        </Checkbox>
      </CheckboxGroup>
    </div>
  </Card>
  <Card class="typeCheckBoxClassTWO">
    <div>
      <span style="color: RGB(87,139,237);font-size: 8px">疫情重点关注人员：</span>
      <i-switch v-model="yQmapViewMode" size="large">
        <span slot="open">显示</span>
        <span slot="close">隐藏</span>
      </i-switch>
    </div>
  </Card>
<!--  <Card class="typeCheckBoxClassFive">-->
<!--    <div>-->
<!--      <span style="color: RGB(87,139,237);font-size: 8px">视图切换：</span>-->
<!--      <i-switch v-model="mapViewMode" size="large">-->
<!--        <span slot="open">3D</span>-->
<!--        <span slot="close">2D</span>-->
<!--      </i-switch>-->
<!--    </div>-->
<!--  </Card>-->
<!--  <Card class="typeCheckBoxClassThree">-->
<!--    <div>-->
<!--      <Row>-->
<!--        <Col v-for="(item,index) in GridZYList" :key="index" span="8">-->
<!--          <div :class="{ClickTLSpan : item.is_pick === true}" @click="TLClick(item,index)">-->
<!--            <img :src="item.icon" width="20px" height="20px" style="margin-right: 5px">-->
<!--            {{item.name}}-->
<!--          </div>-->
<!--        </Col>-->
<!--      </Row>-->
<!--    </div>-->
<!--  </Card>-->
<!--  <Card v-if="GridZYList.length > 0 && GridZYList[0].is_pick === true" class="typeCheckBoxClassFour">-->
<!--    <div>-->
<!--      <span style="margin: 10px" v-show="placeShow" v-for="(itemC,indexC) in GridZYList[0].children" :key="indexC"  :class="{ClickTLSpan : itemC.is_pick === true}" @click="TLClickForSecond(itemC,indexC)">-->
<!--        <div style="display: inline">-->
<!--          <img :src="itemC.icon" width="20px" height="20px" style="margin-right: 5px">-->
<!--            {{itemC.name}}-->
<!--        </div>-->
<!--      </span>-->
<!--    </div>-->
<!--  </Card>-->
<map-info
    v-if="mapType === 'GD'"
    @callBackMap="callBackMap"
    :yQmapViewMode="yQmapViewMode"
    :mapViewMode="mapViewMode"
    :choiceInfo="choiceInfo"
    :typeCheckBox="typeCheckBox"></map-info>
<ht-map
    v-if="mapType === 'HT'"
    @callBackMap="callBackMap"
    :yQmapViewMode="yQmapViewMode"
    :mapViewMode="mapViewMode"
    :choiceInfo="choiceInfo"
    :typeCheckBox="typeCheckBox"
></ht-map>
<statistics-info :statisticsShowInfo="statisticsShowInfo"></statistics-info>
</div>
</template>

<script>
import SelectInfo from './select-info'
import MapInfo from './map-info'
import StatisticsInfo from './statistics-info'
import TreeInfo from './tree-info'
import {
  findGridTypeList,
  findMerchantByMapNewList,
  findSocietyByMapList,
  findSubstanceByMapList
} from '../../../api/eventlist'
import HtMap from '../../V3-map'
import { mapTypeChange } from '../../../libs/mapTypeUtil'

export default {
  name: 'index',
  components: { HtMap, TreeInfo, StatisticsInfo, MapInfo, SelectInfo },
  data () {
    return {
      mapType: '',
      placeShow: true,
      mapViewMode: false,
      yQmapViewMode: false,
      tabValue: 0,
      choiceInfo: {},
      typeCheckBox: [
        'residential',
        'garden'
      ],
      classType1: true,
      classType2: false,
      selectShow: true,
      treeShow: false,
      statisticsShowInfo: {},
      GridZYList: [],
      substanceList: [],
      societyList: [],
      placeList: []
    }
  },
  methods: {
    // 下拉回调
    callBack (e) {
      this.choiceInfo = e
      this.$set(this.statisticsShowInfo, 'id', e.id)
      this.$set(this.statisticsShowInfo, 'grade', e.grade)
    },
    callBackTree (e) {
      this.choiceInfo = e
      this.$set(this.statisticsShowInfo, 'id', e.id)
      this.$set(this.statisticsShowInfo, 'grade', e.grade)
    },
    // 地图回调
    callBackMap (e) {
      this.$set(this.statisticsShowInfo, 'id', e.id)
      this.$set(this.statisticsShowInfo, 'grade', e.grade)
    },
    changeTab (e) {
      if (e === 0) {
        this.selectShow = false
        this.$nextTick(() => {
          this.classType1 = true
          this.classType2 = false
          this.selectShow = true
          this.treeShow = false
        })
      } else if (e === 1) {
        this.treeShow = false
        this.$nextTick(() => {
          this.classType1 = false
          this.classType2 = true
          this.treeShow = true
          this.selectShow = false
        })
      }
    },
    findGridZYList () {
      findGridTypeList().then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          data.forEach(item => {
            if (this.choiceInfo.grade === '6') {
              item.is_pick = true
            } else {
              item.is_pick = false
            }
          })
          this.GridZYList = data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    TLClick (item, index) {
      this.GridZYList[index].is_pick = !item.is_pick
      if (!this.GridZYList[index].is_pick) {
        // 取消选中
        if (this.GridZYList[index].type === 'W') {
          this.substanceList = []
        }
        if (this.GridZYList[index].type === 'S') {
          this.societyList = []
        }
        if (this.GridZYList[index].type === 'P') {
          this.placeList = []
        }
      } else {
        // 选中
        if (this.GridZYList[index].type === 'W') {
          this.substanceList = []
          this.findSubstanceByMapList()
        }
        if (this.GridZYList[index].type === 'S') {
          this.societyList = []
          this.findSocietyByMapList()
        }
        if (this.GridZYList[index].type === 'P') {
          this.GridZYList[0].children.forEach(item => {
            item.is_pick = false
          })
        }
      }
    },
    TLClickForSecond (item, index) {
      let children = this.GridZYList[0].children
      children[index].is_pick = !item.is_pick
      this.placeShow = false
      this.$nextTick(function () {
        this.placeShow = true
      })
      this.GridZYList[0].children = children
      if (!this.GridZYList[0].children[index].is_pick) {
        // 取消选中
        let data = this.$common.xeUtils.clone(this.placeList)
        this.placeList = []
        data.forEach(item1 => {
          if (item1.merchant_type !== item.id) {
            this.placeList.push(item1)
          }
        })
      } else {
        this.findMerchantByMapListByTypeNew(item.id).then(ret => {
          this.GridZYList[0].is_pick = false
          this.$nextTick(() => {
            if (ret) {
              ret.forEach(Pitem => {
                this.placeList.push(Pitem)
              })
            }
            this.GridZYList[0].is_pick = true
          })
        })
      }
    },
    findMerchantByMapListByTypeNew (e) {
      let data = {
        id: this.choiceInfo.id,
        grade: this.choiceInfo.grade,
        merchant_type: e
      }
      return findMerchantByMapNewList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          if (result.length !== 0) {
            result.forEach((item, index) => {
              let x = item.csc_mapjson.split(',')
              let y = []
              y.push(x[0])
              y.push(x[1])
              item.csc_mapjson1 = y
            })
          }
          return result
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询社会组织
    findSocietyByMapList () {
      let data = {
        id: this.pickInfo.id,
        grade: this.pickInfo.grade
      }
      findSocietyByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.societyList = []
          this.societyList = ret.data.data
          if (this.societyList.length !== 0) {
            this.societyList.forEach((item, index) => {
              let x = item.csc_mapjson.split(',')
              let y = []
              y.push(x[0])
              y.push(x[1])
              item.csc_mapjson1 = y
            })
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询物件列表
    findSubstanceByMapList () {
      let data = {
        id: this.pickInfo.id,
        grade: this.pickInfo.grade
      }
      findSubstanceByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.substanceList = []
          this.substanceList = ret.data.data
          if (this.substanceList.length !== 0) {
            this.substanceList.forEach((item, index) => {
              let x = item.csc_mapjson.split(',')
              let y = []
              y.push(x[0])
              y.push(x[1])
              item.csc_mapjson1 = y
              // item.substance_type = this.substanceImg
            })
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    if (this.$route.query.mapType === 'HT') {
      this.mapType = 'HT'
    } else {
      this.mapType = mapTypeChange()
    }
    this.findGridZYList()
  }
}
</script>

<style scoped>
.newGridCardClass{
  width: 250px;
  position: absolute;
  top: 23%;
  left: 20px;
  z-index: 1000;
  background-color: #235CA7;
  /*opacity: 0.7;*/
}
.typeCheckBoxClass{
  width: 250px;
  position: absolute;
  bottom: 10%;
  right: 20px;
  z-index: 1000;
  background-color: #235CA7;
  color: white;
  text-align: center;
}
.typeCheckBoxClass >>> .ivu-card-body{
  padding: 10px;
}
.typeCheckBoxClass >>> .ivu-checkbox-wrapper{
  font-size: 14px;
}
.typeCheckBoxClassTWO{
  width: 250px;
  position: absolute;
  bottom: 3%;
  right: 20px;
  z-index: 1000;
  background-color: #235CA7;
  color: white;
  text-align: center;
}
.typeCheckBoxClassTWO >>> .ivu-card-body{
  padding: 10px;
}
.typeCheckBoxClassTWO >>> .ivu-checkbox-wrapper{
  font-size: 14px;
}
.typeCheckBoxClassThree{
  width: 300px;
  position: absolute;
  bottom: 12%;
  right: 45%;
  z-index: 1000;
  background-color: #235CA7;
  color: white;
  text-align: center;
}
.typeCheckBoxClassThree >>> .ivu-card-body{
  padding: 10px;
}
.typeCheckBoxClassThree >>> .ivu-checkbox-wrapper{
  font-size: 14px;
}
.typeCheckBoxClassFour{
  width: 660px;
  position: absolute;
  bottom: 3%;
  right: 25%;
  z-index: 1000;
  background-color: #235CA7;
  color: white;
  text-align: left;
  word-wrap: break-word
}
.typeCheckBoxClassFour >>> .ivu-card-body{
  padding: 10px;
}
.typeCheckBoxClassFour >>> .ivu-checkbox-wrapper{
  font-size: 14px;
}
.typeCheckBoxClassFive{
  width: 250px;
  position: absolute;
  bottom: 17%;
  right: 20px;
  z-index: 1000;
  background-color: #235CA7;
  color: white;
  text-align: center;
}
.typeCheckBoxClassFive >>> .ivu-card-body{
  padding: 10px;
}
.typeCheckBoxClassFive >>> .ivu-checkbox-wrapper{
  font-size: 14px;
}
.residentialBoxClass >>>.ivu-checkbox-checked .ivu-checkbox-inner{
  background-color: #FF1493;
  border-color:#FF1493
}
.gardenBoxClass >>>.ivu-checkbox-checked .ivu-checkbox-inner{
  background-color: #3CB371;
  border-color:#3CB371
}
.ivu-card-bordered{
  border: 0px;
}
.newGridCardClassTwo{
  width: 300px;
  position: absolute;
  top: 23%;
  left: 20px;
  z-index: 1000;
  background-color: #235CA7;
  /*opacity: 0.7;*/
}
.newGridCardClassOne{
  width: 250px;
  position: absolute;
  top: 23%;
  left: 20px;
  z-index: 1000;
  background-color: #235CA7;
  /*opacity: 0.7;*/
}
.ClickTLSpan{
  border: 1px solid white;
  border-radius: 10px;
}
</style>
